<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="表名">
              <a-input placeholder="请输入表名" v-model="queryParam.tableName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="表类型">
              <j-multi-select-tag v-model="queryParam.tableType_MultiString" :options="tableTypeDictOptions" placeholder="请选择表类型">
              </j-multi-select-tag>

              <!-- <a-input placeholder="请输入表类型" v-model="queryParam.tableType"></a-input> -->
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="表描述">
              <a-input placeholder="请输入表描述" v-model="queryParam.tableTxt"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <!-- <div class="table-operator"> -->
            <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            <!-- </div> -->
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button type="primary" @click="add" icon="plus">新增</a-button>
      <a-button type="primary" @click="goVisSql" icon="database" style="margin-left: 8px">导入数据库表</a-button>
      <a-button type="primary" @click="showColumn" icon="database" style="margin-left: 8px">设置列</a-button>
      <a-button @click="batchDelFunNew" v-if="selectedRowKeysOnline.length > 0" ghost type="primary" icon="delete">批量删除
      </a-button>
      <!--  -->
    </div>

    <!-- table区域-begin -->
    <div>
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择
        <a style="font-weight: 600">{{ selectedRowKeysOnline.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
      </div>
      <a-table ref="table" size="middle" bordered rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="ipagination" :loading="loading" class="j-table-force-nowrap"
        :rowSelection="{ selectedRowKeys: selectedRowKeysOnline, onChange: onSelectChangeOnline }" @change="handleTableChange">
        <span slot="tableType" slot-scope="text">
          <div>{{ tableTypeList[text] }}</div>
        </span>
        <span slot="isDbSynch" slot-scope="text">
          <div :class="text + '-text'">{{ text === 'N' ? '未同步' : '同步' }}</div>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link"> 更多
              <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <!--  -->
              <a-menu-item v-show="record.isDbSynch === 'N'">
                <a href="javascript:;" @click="openDoDbSynch(record.id)">同步数据库</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="remove(record.id)">移除</a>
              </a-menu-item>
              <a-menu-item>
                <a href="javascript:;" @click="del(record.id)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
    <!-- 同步数据库 -->
    <a-modal title="同步数据库" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
      <a-radio-group v-model="synMethod">
        <a-radio :style="radioStyle" :value="item.value" v-for="item in sqlList" :key="item.value">
          {{ item.label }}
        </a-radio>
      </a-radio-group>
    </a-modal>
    <!-- 从数据库导入表单 -->
    <SqlImportFormModal ref="sqlImportForm" @confirm="sqlImportFormConfirm" :sqlImportFormVisible="sqlImportFormVisible"></SqlImportFormModal>
    <!-- 新增 -->
    <AddOnlineModal @close="close" :title="title" @ok="ok" ref="addOnlineModal" :visible="addOnlineModalVisible"></AddOnlineModal>
    <SetColumn columnName='设置列' ref="SetColumn" v-if="showSetColumn" @sureBtn='sureBtn' @cancelBtn='showSetColumn=false' />
  </a-card>
</template>

<script>
import SetColumn from '@/pubComponent/SetColumn.vue'

import JInput from '@/components/jeecg/JInput'
import JTreeDict from '@/components/jeecg/JTreeDict'
import SqlImportFormModal from './sqlImportForm'
import AddOnlineModal from './addOnlines'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { removeRecord, deleteRecord, doDbSynch, deleteBatch } from '@/api/api'
import store from '@/store'
import { Modal } from 'ant-design-vue'
export default {
  name: 'MyTaskNeedToExcute',
  mixins: [JeecgListMixin],
  components: {
    SqlImportFormModal,
    AddOnlineModal,
    JInput,
    JTreeDict,
    SetColumn,
  },
  data() {
    return {
      addOnlineModalVisible: false,
      sqlImportFormVisible: false,
      modal: null,
      form: this.$form.createForm(this),
      confirmLoading: false,
      visible: false,
      synMethod: 'normal', //normal普通同步,force强制同步
      radioStyle: {
        display: 'block',
        height: '30px',
        lineHeight: '30px',
      },
      selectedRowKeysOnline: [],
      editorValue: '',
      tableTypeList: {
        1: '单表',
        2: '主表',
        3: '附表',
      },
      sqlList: [
        {
          label: '普通同步(保留表数据)',
          value: 'normal',
        },
        {
          label: '强制同步(删除表,重新生成)',
          value: 'force',
        },
      ],
      tableTypeDictOptions: [
        {
          label: '单表',
          value: '1',
        },
        {
          label: '主表',
          value: '2',
        },
        {
          label: '附表',
          value: '3',
        },
      ],
      columns: [
        {
          title: '序号',
          dataIndex: '',
          key: 'rowIndex',
          width: 60,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '表类型',
          dataIndex: 'tableType',
          align: 'center',
          scopedSlots: { customRender: 'tableType' },
          sorter: true,
        },
        {
          title: '表名',
          dataIndex: 'tableName',
          align: 'center',
          sorter: true,
        },
        {
          title: '表描述',
          dataIndex: 'tableTxt',
          align: 'center',
          sorter: true,
        },
        {
          title: '版本',
          dataIndex: 'tableVersion',
          // dataIndex: 'initiator_dictText',
          align: 'center',
        },
        {
          title: '同步状态',
          dataIndex: 'isDbSynch',
          sorter: true,
          align: 'center',
          scopedSlots: { customRender: 'isDbSynch' },
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          sorter: true,
          align: 'center',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
      ],
      title: '',
      url: {
        list: '/jktable/head/list',
        // delete: '/jktable/head/removeRecord',
        // deleteBatch: '/quick-platform/jktable/head/deleteBatch',
      },
      colunmArr: [
        {
          checkAll: false,  //当前组是否全选
          indeterminate: false,  //当前组不全选且有选择项时显示状态
          checkedList: [],  //已选数据（不包括所有属性，只含有所选项的每一项的value）
          selectList: [],  //已选数据（包括所有属性）
          topTitle: '基础字段',  //当前组顶部字段
          plainOptions: [    //当前组提供可供选择的选项
            { label: '订单编号', value: '1', isLock: false },
            { label: '客户订单', value: '2', isLock: false },
            { label: '客户', value: '3', isLock: false },
            { label: '创建日期', value: '4', isLock: false },
            { label: '订单数量', value: '5', isLock: false },
            { label: '发货进度', value: '6', isLock: false },
            { label: '员工数量', value: '7', isLock: false },
            { label: '中午伙食', value: '8', isLock: false },
            { label: '男人数量', value: '9', isLock: false },
            { label: '女人数量', value: '10', isLock: false },
            { label: '领导数量', value: '11', isLock: false },
          ],
        },
      ],
      showSetColumn: false,
    }
  },
  methods: {
    showColumn() {
      this.showSetColumn = true
      this.$nextTick(() => {
        this.$refs.SetColumn.showModal(this.colunmArr)
      })
    },
    sureBtn(emitArr) {
      console.log('当前选中的数据是：', emitArr)
    },
    onClearSelected() {
      this.selectedRowKeysOnline = []
    },
    close() {
      this.addOnlineModalVisible = false
    },
    ok() {
      this.searchQuery()
    },
    goVisSql() {
      this.sqlImportFormVisible = true
      this.$refs.sqlImportForm.getData()
      this.$refs.sqlImportForm.init()
    },
    sqlImportFormConfirm(v) {
      if (v) {
        this.searchQuery()
      }
      this.sqlImportFormVisible = false
    },
    onSelectChangeOnline(V) {
      this.selectedRowKeysOnline = V
      // console.log(V,'V')
    },
    openDoDbSynch(v) {
      this.code = v
      this.visible = true
    },
    add() {
      this.addOnlineModalVisible = true
      this.$refs.addOnlineModal.getData()
      this.title = '新增'
    },
    handleEdit(record) {
      this.addOnlineModalVisible = true
      this.$refs.addOnlineModal.edit(record)
      this.title = '编辑'
    },
    closeConfirm() {
      Modal.destroyAll()
    },
    // 删除当前
    isdeleteBatch(type) {
      this.modal.destroy()
      deleteBatch({ ids: this.selectedRowKeysOnline.toString(), flag: type === 1 ? 1 : 0 })
        .then((res) => {
          if (res.success) {
            this.$antdMessage.success(res.message)
            this.selectedRowKeysOnline = []
            this.searchQuery()
          } else {
            this.$antdMessage.error(res.message)
          }
        })
        .catch((e) => {
          this.$antdMessage.error(e.message)
        })
    },
    // 批量删除移除
    batchDelFunNew() {
      var that = this
      this.modal = that.$antdConfirm({
        title: '提示?',
        content: (
          <div>
            移除只会删除表单配置、删除会删除对应的数据库表。请确认？
            <div>
              <a-button
                onClick={that.isdeleteBatch.bind()}
                style={{ position: 'absolute', bottom: '24px', left: '175px' }}
              >
                移除
              </a-button>
            </div>
          </div>
        ),
        cancelText: '删除',
        okText: '取消',
        onOk() {},
        onCancel() {
          that.isdeleteBatch(1)
        },
      })
    },
    // 移除
    remove(v) {
      var that = this
      that.$antdConfirm({
        title: '是否移除?',
        content: '',
        onOk() {
          removeRecord({ id: v })
            .then((res) => {
              if (res.success) {
                that.$antdMessage.success(res.message)
                that.searchQuery()
              } else {
                that.$antdMessage.error(res.message)
              }
            })
            .catch((e) => {
              that.$antdMessage.error(e.message)
            })
        },
        onCancel() {},
      })
    },
    del(v) {
      var that = this
      that.$antdConfirm({
        title: '是否删除?',
        content: '',
        onOk() {
          deleteRecord({ id: v })
            .then((res) => {
              if (res.success) {
                that.$antdMessage.success(res.message)
                that.searchQuery()
              } else {
                that.$antdMessage.error(res.message)
              }
            })
            .catch((e) => {
              that.$antdMessage.error(e.message)
            })
        },
        onCancel() {},
      })
    },
    handleCancel() {
      this.visible = false
    },
    handleOk() {
      this.confirmLoading = true
      doDbSynch({
        code: this.code,
        synMethod: this.synMethod,
      })
        .then((res) => {
          this.confirmLoading = false
          if (res.success) {
            this.visible = false
            this.$antdMessage.success(res.message)
            this.searchQuery()
          } else {
            this.$antdMessage.error(res.message)
          }
        })
        .catch((e) => {
          this.$antdMessage.error(e.message)
        })
    },
  },
}
</script>
<style lang="less" scoped>
.N-text {
  color: red;
}
.Y-text {
  color: limegreen;
}
</style>